<template>
    <div class="box">
        <h1>组件间通信6: $attrs与$listeners</h1>
        <h2>需求: 自定义带Hover提示的按钮</h2>
        <br><br>

        <!--
            步骤:
            1. 直接把element中 tootile组件中的实例代码粘贴过来,按钮样式稍微改一下改成想要的效果
                注意: 需要注册 Tooltip 组件
            2.  问: 我们封装的是一个什么组件?
                答: 我们封装的是一个按钮带提示的组件,是一个按钮
                
                问: HintButton 按钮是不是一个【通用】组件?
                答: 我们想要封装的是【通用】组件,现在 HintButton 中写死了,这个组件就不通用了
                
                问: 如何把这个组件改成一个【通用】组件?
                答: 把按钮的所有配置项都拿到组件外部进行配置即可
                
                问: 给组件传递的按钮的属性一个一个接收吗?
                答: 没办法一个一个接收,因为 el-button 这个第三方的组件上面有太多的配置项
                    如果一个一个属性去接收的话,那么需要把 el-button的所有属性都看一遍,并且子组件props接收

                问: 那怎么办?
                答: 使用 $attrs,它会接收到绑定在当前元素上的所有属性
                        除了在props中接收过的属性 和 style 和 peops
                
                问: 如何使用 $attrs?
                答: v-bind="$attrs" 使用v-bind给el-button绑定$attrs
                        相当于把 $attrs 这个对象中的所有属性都绑定到了 el-button 上
                        注意: 这里的  v-bind 不能简写

                问: el-button 可以绑定很多事件,那么我们封装的这个组件,如何把事件帮到 HintButton 中的 el-button上?
                答: 使用 $listeners

                问: 如何使用 $listeners?
                答: $listeners 它会接收到所有绑定在组件上的事件组成的对象
                        使用 v-on 进行绑定
                            v-on="$listeners"
                        将当前组件接收到的所有事件,直接绑定到 el-button 上
                        注意: 这里的 v-on 不能简写@
        -->

        <HintButton
            class="qwer"
            style="width: 200px;"
            type="primary"
            icon="el-icon-edit"
            round
            content="按钮"
            @click="clickHandler"
        ></HintButton>
    </div>
</template>

<script>
import HintButton from './HintButton'
export default {
    name: "AttrsListenersTest",
    components: { HintButton },
    methods: {
        clickHandler() {
            console.log('触发了 click 事件')
        }
    }
}
</script>

<style scoped>

</style>